<template>
  <div class="mod-user">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <div class="seacrhMoney">
        <el-form-item>
          <div class="balance-searchMoney">
            法人公司
            <!-- <el-select v-model="value1" clearable @change="cityCode" filterable placeholder="请选择">
              <el-option v-for="item in city" :key="item.legalAccountCode" :label="item.legalCompanyName" :value="item.legalAccountCode">
              </el-option>
            </el-select> -->
            <el-input class="input" placeholder="请输入法人公司" v-model="cityName"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="demand">查询</el-button>
          <el-button type="primary" @click="empty">清空</el-button>
        </el-form-item>
      </div>
    </el-form>

    <!-- 表格 -->
    <el-table :data="dataList" v-loading="dataListLoading" element-loading-text="数据加载中" element-loading-spinner="el-icon-loading" element-loading-custom-class="loading_color" style="width: 100%;">
      <template slot="empty">
        <img class="machine" src="../../assets/img/machine.svg" alt="" />
        <div style="font-size: 14px; text-align: center">暂无数据</div>
      </template>
      <el-table-column prop="legalCompanyName" header-align="center" align="center" label="法人公司名称" width="200">
      </el-table-column>
      <el-table-column prop="settlementInterval" header-align="center" align="center" label="结算周期" width="150">
        <template slot-scope="scope">
          <div size="small" type="danger">
            T+{{ scope.row.settlementInterval }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="payRate" header-align="center" align="center" label="支付费率">
        <template slot-scope="scope">
          <div size="small" type="danger">{{ scope.row.payRate }}%</div>
        </template>
      </el-table-column>
      <el-table-column prop="withdrawFee" header-align="center" align="center" label="提现手续费(元/笔)">
        <template slot-scope="scope">
          <div size="small" type="danger">{{ scope.row.withdrawFee }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="withdrawType" header-align="center" align="center" label="提现审批方式">
        <template slot-scope="scope">
          <div v-if="scope.row.withdrawType == 1" size="small" type="danger">
            财务同意后打款
          </div>
          <div v-else size="small">系统默认打款</div>
        </template>
      </el-table-column>

      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="setUp(scope.row.legalAccountCode)">参数设置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <!-- 表单 -->
    <el-dialog title="参数设置" class="diglog" :visible.sync="dialogFormVisible">
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
        <div class="demo-input-suffix">
          <div class="left">
            <span style="color: #d9001b">*</span>结算周期：
          </div>
          <el-form-item prop="settlementIntervalTwo">
            <el-input v-model="dataForm.settlementIntervalTwo" @input="settlementInterval($event)" placeholder="请输入正整数"></el-input>
          </el-form-item>
        </div>
        <div class="demo-input-suffix">
          <div class="left">
            <span style="color: #d9001b">*</span>支付费率：
          </div>
          <el-form-item prop="payRateFee">
            <el-input placeholder="请输入大于0的数字" v-model="dataForm.payRateFee" @input="payRateFeeTwo($event)">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
        </div>
        <div class="demo-input-suffix">
          <div class="left">
            <span style="color: #d9001b">*</span>提现手续费：
          </div>
          <el-form-item prop="withdrawFee">
            <el-input placeholder="请输入大于0的数字" v-model="dataForm.withdrawFee" @input="withdrawFeeTwo($event)">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </div>
        <div class="demo-input-suffix">
          <div class="left">
            <span style="color: #d9001b">*</span>提现方式：
          </div>

          <template>
            <el-radio v-model="radio" @change="withdrawTypeTwo" label="1">财务同意后打款</el-radio>
            <el-radio v-model="radio" @change="withdrawTypeTwo" label="2">系统默认打款</el-radio>
          </template>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dataFormSubmit(dataForm)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dataForm: {
        settlementIntervalTwo: '',
        withdrawFee: '',
        payRateFee: ''
      },
      dataRule: {
        settlementIntervalTwo: [
          { required: true, message: '结算周期不能为空', trigger: 'blur' }
        ],
        payRateFee: [
          { required: true, message: '支付费率', trigger: 'blur' }
        ],
        withdrawFee: [
          { required: true, message: '提现手续费', trigger: 'blur' }
        ]
      },
      len: '',
      cityName: '',
      dataList: [],
      pageIndex: 1,
      pageSize: 20,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      value1: '',
      city: [],
      dialogFormVisible: false,
      radio: '1',
      legalAccountCode: '',
      settlementIntervalTwo: '',
      payRateFee: '',
      withdrawFee: '',
      withdrawType: '1'
      // payRate: ''
    }
  },
  activated () {
    this.getDataList()
    // this.cityList()
  },
  methods: {
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl(
          'cassadmin/v1/legalPersonDetail/getLegalAccountByPage'
        ),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          size: this.pageSize,
          isShowAll: 'false',
          legalAccountCode: this.legalAccountCode,
          legalCompanyName: this.cityName
          // payRate: this.payRate
        })
      }).then(({ data }) => {
        console.log(data.data.list)
        if (data.success === 1) {
          // console.log(data)
          this.dataList = data.data.list
          this.totalPage = data.data.total
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    //查询
    demand () {
      this.pageIndex = 1
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl(
          'cassadmin/v1/legalPersonDetail/getLegalAccountByPage'
        ),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          size: this.pageSize,
          isShowAll: 'false',
          legalAccountCode: this.legalAccountCode,
          legalCompanyName: this.cityName
        })
      }).then(({ data }) => {
        console.log(data.data.list)
        if (data.success === 1) {
          this.dataList = data.data.list
          this.totalPage = data.data.total
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    //清空
    empty () {
      this.cityName = ''
      this.getDataList()
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.dataListLoading = true
      this.pageIndex = 1
      this.$http({
        url: this.$http.adornUrl(
          'cassadmin/v1/legalPersonDetail/getLegalAccountByPage'
        ),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          size: this.pageSize,
          isShowAll: 'false',
          legalAccountCode: this.legalAccountCode,
          legalCompanyName: this.cityName
        })
      }).then(({ data }) => {
        console.log(data.data.list)
        if (data.success === 1) {
          this.dataList = data.data.list
          this.totalPage = data.data.total
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl(
          'cassadmin/v1/legalPersonDetail/getLegalAccountByPage'
        ),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          size: this.pageSize,
          isShowAll: 'false',
          legalAccountCode: this.legalAccountCode,
          legalCompanyName: this.cityName
        })
      }).then(({ data }) => {
        console.log(data.data.list)
        if (data.success === 1) {
          this.dataList = data.data.list
          this.totalPage = data.data.total
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // // 获取城市列表
    // cityList () {
    //   this.dataListLoading = true
    //   this.$http({
    //     url: this.$http.adornUrl(
    //       'cassadmin/legalCompany/getByCurrentFinanceCode'
    //     ),
    //     method: 'get',
    //     params: this.$http.adornParams({})
    //   }).then(({ data }) => {
    //     if (data.success === 1) {
    //       // console.log(data)
    //       this.city = data.data
    //     } else {
    //       this.$message.error(data.errorMsg)
    //     }
    //     this.dataListLoading = false
    //   })
    // },
    // 结算对象
    cityCode (e) {
      this.pageIndex = 1
      this.legalAccountCode = e
      this.getDataList()
    },
    // 设置参数
    setUp (legalAccountCode) {
      // console.log(legalAccountCode);
      this.dialogFormVisible = true
      this.legalAccountCode = legalAccountCode
    },
    // 提现方式
    withdrawTypeTwo (e) {
      this.withdrawType = e
      console.log(this.withdrawType)
    },
    // 结算周期
    settlementInterval (e) {
      this.settlementIntervalTwo = e.replace(/[^\d]/g, '')
      console.log(this.settlementIntervalTwo)
    },
    // 手续费
    payRateFeeTwo (e) {
      this.payRateFee = e
    },
    // 手续费
    withdrawFeeTwo (e) {
      this.withdrawFee = e

    },
    // 提交表单
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              'cassadmin/v1/legalPersonDetail/updateParamSet'
            ),
            method: 'post',
            data: this.$http.adornData({
              legalAccountCode: this.legalAccountCode,
              settlementInterval: this.settlementIntervalTwo,
              withdrawFee: this.withdrawFee,
              withdrawType: this.withdrawType,
              payRate: this.payRateFee
            })
          }).then(({ data }) => {
            if (data.success === 1) {
              this.dialogFormVisible = false
              this.legalAccountCode = ''
              this.getDataList()
            } else {
              this.$message.error(data.errorMsg)
            }
          })
        } else {
          console.log('hh')
        }
      })
    }
  }
}
</script>
<style scoped>
.seacrhMoney {
  display: flex;
}
.balance-searchMoney {
  display: flex;
  align-items: center;
}
.input {
  flex: 1;
  margin-left: 5px;
}
</style>
